<template>
    <!--     attrs: Array(2)
id: 5
specsname: "尺寸"
status: 1 -->
    <div>
        <el-table :data="specsList" stripe :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id"
            style="width: 100%">
            <el-table-column prop="id" label="编号" width="80" align="center">
            </el-table-column>
            <el-table-column prop="specsname" label="规格名称" width="80" align="center">
            </el-table-column>
            <el-table-column prop="attrs" label="规格类型">

                <template v-slot="prop"><el-tag type="success" v-for="(item, index) in prop.row.attrs" :key="index">{{item}}</el-tag>
                </template>
            



            </el-table-column>




            <el-table-column label="操作"  >
                <template>

                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          background 
          layout="prev, pager, next" 
          :total="specsCount"
          :page-size="specsData.size"
          @current-change="handleChange"
          @prev-click="handleChange"
          @next-click="handleChange"
          >
        </el-pagination>
    </div>
</template>

<script>
    import {
        mapState,
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                specsData: {
                    page: 1,
                    size: 5
                },
                
            }
        },
        created() {
            this.getSpecsListActions(this.specsData),
            this.getSpecsCountListActions()

        },
        computed: {
            ...mapState({
                specsList: state => state.specs.specsList,
                specsCount: state => state.specs.specsCount
            })
        },
        methods: {
            ...mapActions("specs", ['getSpecsListActions', 'getSpecsCountListActions']),
            handleChange(currentPage){
               this.specsData.page = currentPage
               this.getSpecsListActions(this.specsData)
            }
        },
        components: {
          
        }
    }
</script>
<style scoped>
</style>